<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="学前端，到达内" fixed>
      <div slot="right">
        <router-link to="/login">登录</router-link>&nbsp;
        <router-link to="/register">注册</router-link>
      </div>
    </mt-header>
    <!-- 导航 -->
    <mt-navbar class="header" v-model="navactive" fixed>
      <mt-tab-item 
        :id="item.id+''" v-for="(item,i) in cats" :key="i">
        {{item.category_name}}
      </mt-tab-item>
    </mt-navbar>
    <!-- 面板 -->
    <mt-tab-container class="container" v-model="navactive">
      <mt-tab-container-item id="1">
        <mt-swipe class="myswipe" :style="{'height':h}"
          :speed="300"
          :auto="3000">
          <mt-swipe-item>
            <img src="/banner/1.jpg">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/banner/2.jpg">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/banner/3.jpg">
          </mt-swipe-item>
        </mt-swipe>

        <!-- 单一文章信息开始 -->
        <div class="articleItem" 
          v-for="(item,i) in articles" :key="i">
          <div class="articleItem-header">{{item.subject}}</div>
          <div class="articleItem-wrapper">
            <div class="articleImg">
              <img src="../assets/logo.png" />
            </div>
            <div class="articleDes">
              {{item.description}}
            </div>
            <!-- 文章简介结束 -->
          </div>
          <!-- 文章图文信息结束 -->
        </div>
        <!-- 单一文章信息结束 -->

      </mt-tab-container-item>
      <mt-tab-container-item id="2">面板2</mt-tab-container-item>
      <mt-tab-container-item id="3">面板3</mt-tab-container-item>
      <mt-tab-container-item id="4">面板4</mt-tab-container-item>
    </mt-tab-container>

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="main">首页
        <img v-if="selected=='main'"
          src="../assets/main_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/main_0.png" slot="icon" alt="">
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'"
          src="../assets/me_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/me_0.png" slot="icon" alt="">
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'main',
      navactive: '1',
      h: '210px',
      cats: [],   // 保存类别列表[{id:1, category_name:'UI'},{}...]
      articles: []  // 保存当前文章列表
    }
  },
  watch: {
    /** 监听底部选项卡的变化 */
    selected(newval){
      if(newval=='main'){
        this.$router.push('/')  //  路径 / 映射到Home.vue
      }else if(newval=='me'){
        this.$router.push('/me')  // 路径 /me 映射到Me.vue
      }
    }
  },

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted(){
    // 发送http请求，获取UI类别下的第一页文章列表
    this.axios.get('/articles?cid=1&page=1').then(res=>{
      console.log(res);
      // 把文章列表数据存入data，供页面进行列表渲染
      this.articles = res.data.results;
    })

    // 发送http请求，获取类别列表
    this.axios.get('/category').then(result=>{
      console.log(result);
      let cats = result.data.results; // [{},{},{}]
      // 存入data
      this.cats = cats;
    })

    // 计算轮播图的高度，对h变量进行赋值
    let picw = 1242;  // 图片宽度
    let pich = 698;   // 图片高度
    let imgw = window.screen.width; // 屏幕的宽度
    let imgh = ((imgw * pich)/picw)+'px';
    this.h = imgh;
  }
}
</script>

<style scoped>
.myswipe img {
  width: 100%;
}
.is-right a{
  color: white;
}
.container {
  margin-top: 90px;
  margin-bottom: 55px;
}
.header {
  margin-top: 40px;
}
.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>



